<p>
     The DataSource component is an abstraction for using local (arrays of JavaScript objects) or
     remote (XML, JSON, JSONP) data. It fully supports CRUD (Create, Read, Update, Destroy) data
     operations and provides both local and server-side support for Sorting, Paging, Filtering, Grouping, and Aggregates.
 </p>
 <p>
     It is a powerful piece of the Kendo UI Framework, dramatically simplifying data binding and data operations.
 </p>
 <h3>Getting Started</h3><div class="code-sample"><h4 class="code-title">Creating a DataSource bound to local data</h4><pre class="code prettyprint"><code>var movies = [ {
      title: "Star Wars: A New Hope",
      year: 1977
   }, {
     title: "Star Wars: The Empire Strikes Back",
     year: 1980
   }, {
     title: "Star Wars: Return of the Jedi",
     year: 1983
   }
];
var localDataSource = new kendo.data.DataSource({data: movies});</code></pre></div><div class="code-sample"><h4 class="code-title">Creating a DataSource bound to a remote data service (Twitter)</h4><pre class="code prettyprint"><code>var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service url
            url: "http://search.twitter.com/search.json",

            // JSONP is required for cross-domain AJAX
            dataType: "jsonp",

            // additional parameters sent to the remote service
            data: {
                q: "html5"
            }
        }
    },
    // describe the result format
    schema: {
        // the data which the data source will be bound to is in the "results" field
        data: "results"
    }
});</code></pre></div><h3>Binding UI widgets to DataSource</h3>
 <p>
     Many Kendo UI widgets support data binding, and the Kendo UI DataSource is an ideal
     binding source for both local and remote data. A DataSource can be created in-line
     with other UI widget configuration settings, or a shared DataSource can be created
     to enable multiple UI widgets to bind to the same, observable data collection.
 </p><div class="code-sample"><h4 class="code-title">Creating a local DataSource in-line with UI widget configuration</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: new kendo.data.DataSource({
        data: [
        {
            employee: "Joe Smith",
            sales: 2000
        },
        {
            employee: "Jane Smith",
            sales: 2250
        },
        {
            employee: "Will Roberts",
            sales: 1550
        }]
    }),
    series: [{
        type: "line",
        field: "sales",
        name: "Sales in Units"
    }],
    categoryAxis: {
        field: "employee"
    }
});</code></pre></div><div class="code-sample"><h4 class="code-title">Creating and binding to a sharable remote DataSource</h4><pre class="code prettyprint"><code>var sharableDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "data-service.json",
            dataType: "json"
        }
    }
});

// Bind two UI widgets to same DataSource
$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: sharableDataSource,
    series: [{
        field: "sales",
        name: "Sales in Units"
    }],
    categoryAxis: {
        field: "employee"
    }
});

$("#grid").kendoGrid({
    dataSource: sharableDataSource,
        columns: [
        {
            field: "employee",
            title: "Employee"
        },
        {
            field: "sales",
            title: "Sales",
            template: '#= kendo.toString(sales, "N0") #'
    }]
});</code></pre></div>
